<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件基础</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!-- 定义组件 -->
    <div id="components-demo">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <!-- 组件注册 -->
    <div id="app">
        <component-a></component-a>
       <component-b></component-b>
        <component-c></component-c>
    </div>
</body>
<script type="text/javascript">
    // 定义组件
   Vue.component('button-counter',{
    data: function(){
        return {
            count: 0
        }
    },
    template: '<button v-on:click="count++">你可以点击我{{ count }}次。</button>'
   })
   const componentsDemo = new Vue({
    el: '#components-demo'
   })
//    注册组件(全局)
Vue.component('component-a',{
    data: function() {
        return {
            msg: '大好河山',
            isActive: true
        }
    },
    template: '<p v-bind:class="{ active: isActive }">{{ msg }}</p>'
})
// 先定义componentB组件
const  ComponentB = {
    template: '<div v-bind:class="{ activeB: isActive }">{{ componentB }}</div>',
    data: function() {
        return {
            componentB: '闽西职业技术学院',
            isActive: true
        }
    }
}
// 定义componentC组件
const ComponentC = {
    template: '<div v-bind:class="{ activeC: isActive }">{{ componentC }}</div>',
    data: function(){
        return {
            componentC: '厦门理工学院',
            isActive: true
        }
    }
}
// 再注册componetB组件
const componentB = new Vue({
    el: '#app',
    // 局部注册
    components: {
        // 注册组件B
        'component-b': ComponentB,
        // 注册组件C
        'component-c': ComponentC,
    },
})
</script>
<style type="text/css">
    .active {
        background-color: skyblue;
    }
    .activeB {
        background-color: antiquewhite;
    }
    .activeC {
        background-color: gold;
    }
</style>
</html>